<template>
  <div class="designer-editor" v-if="editor.visible">
    {{ editor.modelType === 'node' }}

    <NodeEditor v-show="editor.modelType === 'node'" ref="nodeEditor" />
    {{ editor.modelType === 'edge' }}
    <EdgeEditor v-show="editor.modelType === 'edge'" ref="edgeEditor" />
    <!-- <el-form ref="form" label-width="80px" size="mini">
      <el-form-item label="标签名称">
        <el-input v-model="nodeForm.label" />
      </el-form-item>
      <el-form-item label="节点大小">
        <el-input-number v-model="nodeForm.size" />
      </el-form-item>
      <el-form-item label="填充颜色">
        <el-color-picker v-model="nodeForm.style.fill" />
      </el-form-item>
    </el-form> -->
    <el-button type="primary" @click="handleSave">确定</el-button>
    <el-button type="info" plain @click="editor.visible = false"
      >取消</el-button
    >
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, nextTick } from 'vue'
import NodeEditor from './DesignerEditorNode.vue'
import EdgeEditor from './DesignerEditorEdge.vue'

export default defineComponent({
  name: 'DesignerEditor',
  props: {},
  emits: ['save'],
  components: { NodeEditor, EdgeEditor },
  setup(props, context) {
    const editor = reactive({
      visible: false,
      modelType: 'node',
    })
    const nodeEditor = ref()
    const edgeEditor = ref()

    /**
     * 显示编辑器
     */
    async function open(modelType, model) {
      editor.modelType = modelType
      editor.visible = true
      await nextTick()
      switch (editor.modelType) {
        case 'node':
          nodeEditor.value.setData(model)
          break
        case 'edge':
          edgeEditor.value.setData(model)
      }
    }
    /**
     * 关闭编辑器
     */
    function close() {
      editor.visible = false
    }
    // 保存表单
    const handleSave = function () {
      switch (editor.modelType) {
        case 'node':
          context.emit('save', nodeEditor.value.getData())
          break
        case 'edge':
          context.emit('save', edgeEditor.value.getData())
      }
      editor.visible = false
    }

    return {
      editor,
      nodeEditor,
      edgeEditor,
      open,
      close,
      handleSave,
    }
  },
})
</script>

<style lang="scss" scope></style>
